<template>
	<view class="frame">
		<view class="suc_view">
			<view class="such_view">
				<view class="such_view_flex">
					<image src="@/static/images/such.png" mode="" class="such"></image>
					<view class="such_input_view">
						<input type="text" placeholder="名称、手机号搜索" placeholder-class="suchewei" class="sucheyi" v-model="such"
							@confirm="getsuch" />
					</view>
				</view>
			</view>
		</view>
		<view class="ciesd"></view>
		<view class="beijing">
			<view class="customer_view" v-for="(item,index) in 2" :key="index">
				<view class="customer_view_row">
					<view class="touxiang">
						陈
					</view>
					<view class="customer_view_cloum">
						<view class="customer_view_name">
							陈晨
						</view>
						<view class="customer_view_phone">
							18505392587
						</view>
					</view>
				</view>
				<view class="linrsd"></view>
				<view class="shijian_flex">
					<view class="shijian_flex_timw">
						更新时间：2025-06-28 09:19:00
					</view>
					<view class="shijian_flex_timwname">
						张小天
					</view>
				</view>
				<view class="zhuangaisd" v-if="index == 0">
					首访
				</view>
				<view class="zhuangaisd" v-if="index == 1" style="background-color:#43D2EB;">
					认筹
				</view>
				<view class="zhuangaisd" v-if="index == 2" style="background-color:#A89AD7;">
					认购
				</view>
				<view class="zhuangaisd" v-if="index == 3" style="background-color:#DC8FB1;">
					签约
				</view>
				<view class="zhuangaisd" v-if="index == 4" style="background-color:#EAAE61;">
					全款
				</view>
				<view class="zhuangaisd" v-if="index == 5" style="background-color:#947964;">
					交房
				</view>
			</view>
			<view class="bolck"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				such:''
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.frame {
		width: 100%;
		min-height: 100vh;
		background: #F5F7FB;
		.beijing{
			width: 100%;
			background: #F5F7FB;
		}
		.ciesd{
			width: 750rpx;
			height: 88rpx;
		}
		.suc_view{
			width: 750rpx;
			height: 88rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.such_view {
				width: 750rpx;
				height: 88rpx;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				align-content: center;
			
				.such_view_flex {
					width: 685rpx;
					height: 64rpx;
					border-radius: 324rpx;
					background: rgba(41, 87, 155, 0.05);
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					align-content: center;
					padding-left: 24rpx;
			
					.such {
						width: 32rpx;
						height: 32rpx;
					}
			
					.such_input_view {
						width: 485rpx;
						margin-left: 16rpx;
					}
			
					.suchewei {
						font-size: 28rpx;
						color: #7C849C;
					}
			
					.sucheyi {
						font-size: 28rpx;
						color: #08112C;
					}
				}
			}
		}
		.customer_view{
			width: 702rpx;
			height: 210rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-top: 20rpx;
			margin-left: 24rpx;
			position: relative;
			.customer_view_row{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 28rpx;
				margin-left: 24rpx;
				.touxiang{
					width: 88rpx;
					height: 88rpx;
					background: #05CF67;
					border-radius: 50%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				.customer_view_cloum{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					margin-left: 28rpx;
					.customer_view_name{
						font-size: 32rpx;
						font-weight: bold;
						color: #08112C;
					}
					.customer_view_phone{
						font-size: 28rpx;
						color: #08112C;
						margin-top: 8rpx;
					}
				}
			}
			.linrsd{
				width: 702rpx;
				height: 2rpx;
				background-color: rgba(235, 238, 245, 1);
				margin-top: 28rpx;
			}
			.shijian_flex{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-left: 24rpx;
				padding-right: 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;
				.shijian_flex_timw{
					font-size: 24rpx;
					color: #08112C;
				}
				.shijian_flex_timwname{
					font-size: 24rpx;
					color: #08112C;
				}
			}
			.zhuangaisd{
				width: 96rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 2rpx 12rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				background: #79CD9E;
				position: absolute;
				top: 0;
				right: 0;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	.tanchuang_flex{
		width: 622rpx;
		height: 372rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.laidian{
			width: 248rpx;
			height: 252rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.laidians{
				width: 104rpx;
				height: 104rpx;
			}
			.laidiandsf{
				font-size: 32rpx;
				font-weight: bold;
				color: #08112C;
				margin-top: 24rpx;
			}
		}
	}
</style>